<template>
  <div>
    <!-- 头部栏 -->
    <div>
      <van-icon name="cross" class="topCross" />
    </div>
    <div class="fooditem">
      <div class="foods-par">
        <div class="foods">
          <van-image
            class="food"
            width="50"
            height="50"
            src="https://cloud.axureshop.com/gsc/268B3P/36/cd/54/36cd54df881b4c88a435e8eb815bc005/images/%E7%99%BB%E5%BD%95/u5.svg?token=37249a3934f5f30749782cc64ba635eb54000cd92bee801c3b96ba0ed586a505"
          />
        </div>
      </div>
    </div>
    <!-- 食谱页 -->
    <div class="welcomelogin">
      <p class="menu">欢迎登录食谱</p>
    </div>
    <!-- 账号栏 -->
    <div class="account">
      <van-cell-group>
        <van-field v-model="value" label="账号" placeholder="请输入账号" />
      </van-cell-group>
    </div>
    <!-- 密码栏 -->
    <div>
      <van-cell-group>
        <van-field
          v-model="value"
          label="密码"
          placeholder="请输入密码"
          type="password"
        />
      </van-cell-group>
    </div>
    <!-- 忘记密码 -->
    <div class="sixfloor">
      <a href="#" class="forgetPwd">忘记密码?</a>
    </div>
    <!-- 三方登录 -->
    <div class="sevenfloor">
      <p>第三方登录</p>
    </div>
    <!-- QQ 微信 微博 -->

    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image src="/test/a.png" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="../assets/wechat.png" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="../assets/微博.png" />
      </van-grid-item>
    </van-grid>

    <div></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      value: '',
      showKeyboard: true,
    }
  },
}
</script>

<style>
.fooditem {
  margin-top: 50px;
}
.welcomelogin {
  margin-top: 50px;
}
.topCross {
  margin-left: 350px;
  margin-top: 20px;
}
.foods-par {
  position: relative;
}
.food {
  position: relative;
  border: 1px solid black;
  padding: 15px;
  border-radius: 20px;
  margin-left: 30px;
}
.welcomelogin {
  margin-top: 15px;
  margin-left: 15px;
}
.account {
  margin-top: 50px;
}
.sixfloor {
  margin-top: 25px;
  margin-left: 300px;
}
.forgetPwd {
  text-decoration: none;
  color: #999999;
}
.sevenfloor {
  margin-top: 100px;
  margin-left: 50px;
}
</style>
